import LegalUtil from '@/Utils/LegalUtil';
// @ts-ignore
import { Form, Input, message, Modal } from 'antd';
// @ts-ignore
import React, { useState } from 'react';
// import {updateUser} from "@/services/ant-design-pro/api";

interface IProps {
  openForm: boolean;
  userData: any;
  setUserData: any;
  setOpenForm: (value: boolean) => void;
}
const InformationForm: React.FC<IProps> = ({ openForm, userData, setOpenForm }) => {
  const [usernameText, setUsernameText] = useState('');
  const cancel = () => {
    setOpenForm(false);
  };

  const commit = async () => {
    if (!LegalUtil.checkLength(usernameText as string)) {
      message.warning('用户名长度必须在3到20个字符之间');
    } else if (!LegalUtil.checkCharacter(usernameText as string)) {
      message.warning('用户名只能包含字母、数字和下划线（_）');
    } else if (!LegalUtil.checkFirst(usernameText as string)) {
      message.warning('用户名必须以字母开头');
    } else {
      setOpenForm(false);
      userData.user_name = usernameText;
      // try{
      //   const res = await updateUser(userData);
      //   if(res.user_name){
      //     console.log(res)
      //   }
      // }catch(e){
      //   console.log(e)
      // }
    }
  };

  return (
    <Modal title="修改用户信息" open={openForm} onCancel={cancel} onOk={commit}>
      <Form
        name="basic"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        style={{ maxWidth: 600 }}
        initialValues={{ remember: true }}
        autoComplete="off"
      >
        <Form.Item label="用户名" name="username">
          <Input
            count={{ show: true, max: 20 }}
            value={userData.user_name}
            onChange={(e: any) => setUsernameText(e.target.value)}
          />
        </Form.Item>
        <Form.Item label="密码" name="password">
          <Input />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default InformationForm;
